
<%@ page contentType="text/html" pageEncoding="UTF-8" %> 
<!DOCTYPE html>
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <script src="scripts/jquery-1.7.min.js"> </script>
   <script src="scripts/gury.js"> </script> 
   <script src="scripts/classes.js"> </script> 
   <script src="scripts/tateti.js"> </script> 
   <link rel="stylesheet" href="css/style.css"/>
    <title> Tateti game!! </title>
  </head>
  
  <body>
    <div id="header">
      <div class="grid_1">
        <h1><a href="index.jsp"><span class="hide">tategi-home</span></a></h1>
      </div>
      
      <div class="grid_2">
        <div class="title">tateti</div>
        <div class="clear"></div>  
        <h2>Juego clásico de 2 oponentes intenta <span class="blue">GANAR!</span></h2>
      </div>  
      <div class="clear"></div>  
    </div>
      
    <div id="content">   
      <div class="left">
    <h3> Descripci&oacute;n del juego </h3>
    <p>
      No se conoce su origen exacto, pero si se sabe que es milenario. El objetivo de este
      juego es lograr colocar las tres fichas del mismo color en línea vertical, horizontal o diagonal. Los
      movimientos deben ser al orificio inmediato en la forma antes mencionada. El que primero lo
      consiga ganará la partida.
    </p>
    
    <h3> Objetivos de Proyecto </h3>
    <p>
      Diseñar e implementar un agente inteligente que sea capaz de jugar óptimamente el juego Ta-Te-
      Ti, es decir, el agente debe ser capaz de siempre ganar a su oponente o en el peor de los casos
      declarar la partida como empate.
    </p>
     </div>
      
      <div class="center">
        <div id="game">
          <div id="overlay" class="overlay" style="display:none"></div>
          <div id="boxRes" class="box">
            <a id="boxClose" class="boxclose"></a>
            <script>
              $(function(){
                $('#boxClose').click(function(){
                  $('#boxRes').animate({'top':'-900px'},500,function(){
                    $('#overlay').fadeOut('fast');
                  });
                });
                
              });
            </script>
            <h3> Resultado del Juego</h3>
            <p id="message"></p>
          </div>
          <canvas id="tateti-g" width="400px" height="400px">
          No soporte de canvas!
        </canvas>
          
        </div>
        
      </div>
        
      <div class="right">
        <h3>Log del juego</h3>
        <div id="logGame">
          
         <ul id="Movidas">
              
         </ul>
        </div> 
      </div>
      
      <div class="clear"></div>
      
    </div>
  </body>
  
</html>
